<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 组织架构头部布局 -->
        <treeTools
          :tree-node="company"
          :is-root="false"
        />

        <!-- 树形控件渲染 -->
        <el-tree
          :data="departs"
          :props="defaultProps"
        >
          <!-- data表示节点的数据 -->
          <treeTools
            slot-scope="{data}"
            :tree-node="data"
            @delDepts="getDepartment"
            @addDepts="addDepts"
          />
        </el-tree>

      </el-card>
    </div>

    <!-- 弹框 -->
    <!-- .sync修饰符 -->
    <addDepts :visible.sync="dialogVisible" :tree-node="" />
  </div>
</template>

<script>
import treeTools from './components/tree-tools.vue'
import { getDepartmentList } from '@/api/departments'
import { tranListToTreeData } from '@/utils'
import addDepts from '@/views/departments/components/add-dept.vue'
export default {
  components: {
    treeTools,
    addDepts
  },
  data() {
    return {
      dialogVisible: false, // 控制弹框打开关闭
      company: {}, // 部门信息
      departs: [], // 公司数据
      // 注意：树形控件，默认读取label属性作为节点名称，读取children属性来渲染子节点
      // 可以通过props属性来修改节点名称和渲染子节点的属性读取
      defaultProps: {
        // children: 'child',
        label: 'name'
      }
    }
  },
  created() {
    // 使用方法
    this.getDepartment()
  },
  methods: {
    // 调用接口，获取数据
    async getDepartment() {
      const { depts, companyName } = await getDepartmentList()
      console.log(depts)
      this.departs = tranListToTreeData(depts, '')
      this.company = { name: companyName, manager: '负责人' }
    },
    // 处理弹窗关闭逻辑
    // handleClose() {
    //   this.dialogVisible = false
    // },
    addDepts() {
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>
